<template>
    <div class="tab-content">
        <el-form ref="batteryFormRef" :model="batteryForm" :rules="batteryRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="用户数" prop="userCount">
                        <el-input v-model="batteryForm.userCount" placeholder="请输入用户数量">
                            <template #append>人</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆数" prop="vehicleCount">
                        <el-input v-model="batteryForm.vehicleCount" placeholder="请输入车辆数量">
                            <template #append>辆</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="订单数" prop="orderCount">
                        <el-input v-model="batteryForm.orderCount" placeholder="请输入订单数量">
                            <template #append>单</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="骑行车辆数" prop="ridingVehicleCount">
                        <el-input v-model="batteryForm.ridingVehicleCount" placeholder="请输入骑行车辆数量">
                            <template #append>辆</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveBatteryData">保存共享出行数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'

    // 模块3: 共享出行数据配置表单
    const batteryRules = {
        userCount: [{ required: true, message: '用户数不能为空', trigger: 'blur' }],
        vehicleCount: [{ required: true, message: '车辆数不能为空', trigger: 'blur' }],
        orderCount: [{ required: true, message: '订单数不能为空', trigger: 'blur' }],
        ridingVehicleCount: [{ required: true, message: '骑行车辆数不能为空', trigger: 'blur' }]
    }
    const batteryForm = ref({
        userCount: 0, // 用户数
        vehicleCount: 0, // 车辆数
        orderCount: 0, // 订单数
        ridingVehicleCount: 0 // 骑行车辆数
    })
    const batteryFormRef = ref()
    const saveBatteryData = async () => {
        if (!batteryFormRef.value) return
        
        try {
            await batteryFormRef.value.validate()
            await updateDataClassify({
                id: 4,
                key: 'module3',
                value: batteryForm.value
            })
            console.log('保存共享出行数据:', batteryForm.value)
            ElMessage.success('共享出行数据保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            batteryForm.value = module
        }else{
            batteryForm.value = {
                userCount: 0, // 用户数
                vehicleCount: 0, // 车辆数
                orderCount: 0, // 订单数
                ridingVehicleCount: 0 // 骑行车辆数
            }
        }
    }
    // 暴露方法给父组件
    defineExpose({
        init
    })
</script>
<style lang="less" scoped>

</style>